import React from 'react';
import './App.css';
import { useAuth } from '@src/context/auth-context';
import { ErrorBoundary } from '@src/components/error-boundary';
import { FullPageErrorFallback, FullPageLoading } from '@src/components/lib';
const AuthenticatedApp = React.lazy(() => import('@src/authenticated-app'));
const UnauthenticatedApp = React.lazy(() => import('@src/unauthenticated-app'));

function App() {
  const { user } = useAuth();
  return (
    <div className="App">
      <ErrorBoundary fallbackRender={FullPageErrorFallback}>
        <React.Suspense fallback={<FullPageLoading />}>
          {user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
        </React.Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default App;
